<template>
	<view class="box">
		<!-- 导航 -->
		<view slot="top">
			<u-navbar :autoBack="true" title="商品详情" :placeholder="true" titleStyle="color:#333"
				bgColor="#ffffff"></u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper class="swiper_box" circular :current="current" :indicator-dots="true" :autoplay="true"
				:interval="2000" :duration="500" @change="getIndex">
				<swiper-item v-for="(i,index) in list" :key="index">
					<image :src="i" mode="widthFix" @click="onPreview(list,index)"></image>
				</swiper-item>
			</swiper>
			<view class="num">{{index}}/{{list.length}}</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_info">
			<view class="goods_price">
				￥{{Number(goodsInfo.price)===0?goodsInfo.min_price:goodsInfo.price}}
			</view>
			<view class="goods_name">
				{{goodsInfo.name}}
			</view>
			<view class="goods_sale_num">
				<span>销量</span> <text>{{goodsInfo.sale_count}}</text> <span>库存</span> <text>{{goodsInfo.stock}}</text>
			</view>
			<view class="cupons_box">
				<view class="cupons">
					<span class="num" v-for="item in couponsList.slice(0,2)"
						:key="item.id">{{Math.floor(item.amount)}}元{{item.name}}</span>
				</view>
				<view class="more_cupons" @click="moreCupons">
					<span class="more_text">更多优惠券</span>
					<span class="icon"></span>
				</view>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="dp_box" v-if="goodsInfo.store"
			@click="goPage('/page/cicle-detail/cicle-detail?id='+goodsInfo.store.id)">
			<view class="dp_logo">
				<span class="icon"></span> <span>{{goodsInfo.store.name}}</span>
			</view>
			<view class="allGoods">
				<span class="all">全部商品</span>
				<span class="icon"></span>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_detail_info">
			<view class="title">
				商品详情
			</view>
			<view class="pic">
				<u-parse :html="goodsInfo.detail"></u-parse>
			</view>
		</view>
		<!-- 购买 -->
		<view class="bottomView">
			<view class="left">
				<u-button class="typeBtn" :customStyle="btnGetCode" :hair-line="false" size="medium"
					open-type="contact">
					<view class="item">
						<view class="icon">
							<u-icon :name="'/static/kf.png'" size="28"></u-icon>
						</view>
						<view class="name">
							客服
						</view>
					</view>
				</u-button>
				<view class="items" @click="goCart('/pages/goods-cart/goods-cart')">
					<view class="icon">
						<u-icon :name="'/static/gwc.png'" size="28"></u-icon>
					</view>
					<view class="bottomTitles">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="addCartView" @click="open(1)">加入购物车</view>
				<view class="buyView" @click="open(2)">立即购买</view>
			</view>
		</view>
		<u-popup v-model="showType" mode="bottom" border-radius="10" height="750" :closeable="true">
			<view class="boxs" v-if="typeList">
				<view class="info">
					<view class="left">
						<image :src="image||typeList.image" mode="widthFix" style="width: 160rpx; height: 160rpx;">
						</image>
					</view>
					<view class="right">
						<view class="name">
							{{selectName?selectName:goodsInfo.name}}
						</view>
						<view class="stock">
							{{popStock}}
						</view>
						<view class="price">
							￥{{popPrice}}
						</view>
					</view>
				</view>
				<view class="type" v-for="(item,index) in typeList.specs" :key="index">
					<view class="item" v-for="(items,indexs) in item.list" :key="indexs"
						:class="{active:skusList[index].includes(items.name)}" @click="selectType(index,indexs)">
						{{items.name}}
					</view>
				</view>
				<view class="btns">
					<view class="addCarts" @click="addCart()">
						加入购物车
					</view>
					<view class="onBuy" @click="onGoodsBuy()">
						立即购买
					</view>
				</view>
			</view>
		</u-popup>
		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="skus" :mode="skuMode"
			@open="onOpenSkuPopup" @close="onCloseSkuPopup" @add-cart="addCart" :buyNowText="buyTitle"
			@buy-now="buyNow"></vk-data-goods-sku-popup>
		<u-popup v-model="showCupons" mode="bottom" :closeable="true" border-radius="28">
			<view class="popCupons">
				<view class="title">
					优惠券折扣券
				</view>
				<view class="cupons_items" v-for="item in couponsList" :key="item.id">
					<view class="item">
						<view class="top_dot">
						</view>
						<view class="left">
							<view class="price">
								<span class="icon">￥</span><span class="num">{{Math.floor(item.amount)}}</span>
							</view>
							<view class="type_name">
								{{item.name}}
							</view>
						</view>
						<view class="right">
							<view class="type_title">
								{{item.use_rule}}
							</view>
							<view class="type_cupons">
								<span class="dp" v-if="item.type==1">满减券</span><span class="dp"
									v-if="item.type==2">折扣券</span> <span class="dp" v-if="item.type==3">代金券</span><span
									class="lq" @click="getCoupon(item.id)">领取</span>
							</view>
							<view class="toTime">
								有效期：{{item.created_at}}至{{item.end_time}}
							</view>
						</view>
						<view class="bottom_dot">
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		// 商品详情
		goodsDetails,
		// 加入购物车
		shopGoodsCartAdd,
		// 优惠券
		shopCoupons,
		// 领取优惠券
		addCouponsReceive,
	} from '../../api/product.js'
	import {
		toast
	} from '../../utils/common.js';
	var that; // 当前页面对象
	export default {
		data() {
			return {
				list: [],
				index: 1,
				current: 0,
				// 商品详情
				goodsInfo: '',
				pjList: [1, 2, 3, 4, 5],
				//选择规格的弹窗
				show: false,
				//更多优惠券的弹窗
				showCupons: false,
				selectSize: ["规格1", "规格2", "规格3"],
				//选择规格的内容
				selectValue: "",
				count: 1,
				//规格下标
				indexs: 0,
				// 商品信息
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {},
				skus: {},
				buyTitle: "立即购买",
				// 商品id
				goodsId: "",
				// 优惠券
				couponsList: [],
				btnGetCode: {
					width: "100%",
					border: 'none',
					display: 'flex',
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center'
				},
				typeList: {},
				flag: "",
				showType: false,
				popStock: "",
				popPrice: '',
				selectName: "",
				selectId: '',
				image: "",
				skusList: []

			};
		},
		//获取商品id
		onLoad(res) {
			console.log("hhh", res.id);
			this.goodsId = res.id
			this.initData()
		},
		methods: {
			initData() {
				goodsDetails(this.goodsId).then((res) => {
					console.log("商品信息", res);
					// this.goodsInfo = {
					// 	id: this.goodsId,
					// 	name: res.data.name,
					// 	type: "规格一",
					// 	price: res.data.price,
					// 	stock: res.data.stock,
					// 	sale_count: res.data.sale_count,
					// 	freight_price: res.data.freight_price,
					// 	detail: res.data.detail
					// }
					this.typeList = res.data.skus
					this.popPrice = res.data.min_price;
					this.flag = res.data.is_open_spec
					this.goodsInfo = res.data
					this.popStock = res.data.stock
					this.list = res.data.images_format
					if (res.data.skus) {
						this.selectId = res.data.skus.list[0].id
						this.skusList = res.data.skus.specs.map(item => {
							return []
						})
						console.log("数据", this.skusList);

					}
				})
				shopCoupons(this.goodsId).then((res) => {
					console.log("优惠券信息", res);
					this.couponsList = res.data
				})
			},
			//更换轮播图下标
			getIndex(index) {
				this.index = index.target.current + 1
			},
			onPreview(list, index) {
				console.log(list);
				uni.previewImage({
					current: index,
					urls: list
				});
			},
			//添加数量
			valChange(index) {
				console.log(index);
			},
			//选择规格
			select(i) {
				this.indexs = i
				this.goodsInfo.type = this.selectSize[i]
			},
			//显示优惠券
			moreCupons() {
				this.showCupons = true
			},
			// 查看更多评论
			goPage(url) {
				uni.navigateTo({
					url: url
				})

			},
			goCart(url) {
				uni.switchTab({
					url
				})
			},
			//立即购买
			onGoodsBuy() {
				if (this.flag == 1) {
					let index = this.skusList.findIndex(item => item.length == 0)
					console.log(index);
					if (index != -1) {
						toast('请选择' + this.typeList.specs[index].name)
						return
					}
					if (this.popStock == 0) {
						toast("库存不足")
						return
					}
				}
				if (uni.getStorageSync('access_token') != '') {
					let data = [{
						dpName: this.goodsInfo.store ? this.goodsInfo.store.name : '',
						store_id: this.goodsInfo.store_id,
						id: this.goodsInfo.id,
						name: this.goodsInfo.name,
						image: this.image || this.goodsInfo.images_format[0],
						selectType: this.goodsInfo.type,
						price: this.popPrice,
						count: this.count,
						freight_price: this.goodsInfo.freight_price,
						typeId: this.selectId ? `${this.selectId}` : "0",
						type: this.selectName,
					}]
					this.showType = false
					uni.navigateTo({
						url: '/pages/order-confirm/order-confirm?goods=' + JSON.stringify(data)
					});
				} else {
					uni.showModal({
						title: '提示',
						content: "你还没有登录,是否去登录",
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							console.log(res);
							if (res.confirm == true) {
								uni.navigateTo({
									url: '/pages/wx-login/wx-login'
								})
							}
					
						},
					
					})
					
				}
			},
			// 加入购物车
			addCarts() {
				let obj = {
					goods_id: this.goodsId,
					goods_number: this.count,
					goods_sku_id: this.selectId ? `${this.selectId}` : "0"
				}
				shopGoodsCartAdd(obj).then((res) => {
					if (res.code == 200) {
						toast("加入成功")
					} else {
						toast(res.message)
					}
					console.log("加入购物车", res);
					this.show = false
				})
			},
			getCoupon(id) {
				console.log("领取优惠券");
				addCouponsReceive({
					coupon_id: id
				}).then(res => {
					console.log(res);
					if (res.code == 400) {
						return
					}
					toast("领取成功")
				})
			},
			open(index) {
				if (uni.getStorageSync('access_token') == '') {
					uni.showModal({
						title: '提示',
						content: "你还没有登录,是否去登录",
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							console.log(res);
							if (res.confirm == true) {
								uni.navigateTo({
									url: '/pages/wx-login/wx-login'
								})
							}
					
						},
					
					})
					return
				}
				console.log(index, this.flag);
				if (this.flag === 1) {
					this.openSkuPopup()
					return
				}
				if (index === 1) {
					console.log("加入购物车");
					this.addCarts()
				}
				if (index === 2) {
					console.log("购买");
					this.onGoodsBuy()
				}
			},
			async selectType(index, indexs) {
				this.skusList[index] = []
				this.skusList[index].push(this.typeList.specs[index].list[indexs].name)
				console.log(this.skusList);
				let arr = await this.flattenArray(this.skusList)
				console.log(arr);
				let hhh = this.typeList.list.findIndex(item => item.names.join('') == arr.join(''))
				console.log(hhh);
				if (hhh != -1) {
					this.selectId = this.typeList.list[hhh].id
					this.popStock = this.typeList.list[hhh].stock
					this.popPrice = this.typeList.list[hhh].price
					this.selectName = this.typeList.list[hhh].names[0]
					this.image = this.typeList.list[hhh].cover_format
				} else {
					this.selectId = 0
					this.popStock = 0
					this.selectName = ''
					this.image = ''
				}

			},
			flattenArray(arr) {
				// 使用reduce和concat来扁平化数组  
				return arr.reduce((flat, toFlatten) => {
					return flat.concat(Array.isArray(toFlatten) ? this.flattenArray(toFlatten) : toFlatten);
				}, []);
			},
			openSkuPopup() {
				this.skus = {
					"_id": this.goodsInfo.skus.id,
					"name": this.goodsInfo.skus.name,
					"goods_thumb": this.goodsInfo.skus.image,
					"sku_list": this.goodsInfo.skus.list.map(item => {
						return {
							"_id": item.id,
							"goods_id": item.goods_id,
							"goods_name": this.goodsInfo.skus.name,
							"image": item.cover_format,
							"price": item.price,
							"sku_name_arr": item.names,
							"stock": item.stock
						}
					}),
					"spec_list": this.goodsInfo.skus.specs

				}
				this.skuKey = true;
			},
			onOpenSkuPopup() {
				console.log("监听 - 打开sku组件");
			},
			onCloseSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
			// 加入购物车前的判断
			addCartFn(obj) {
				let {
					selectShop
				} = obj;
				// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
				let res = {};
				let name = selectShop.goods_name;
				if (selectShop.sku_name != "默认") {
					name += "-" + selectShop.sku_name_arr;
				}
				res.msg = `${name} 已添加到购物车`;
				if (typeof obj.success == "function") obj.success(res);
			},
			// 加入购物车按钮
			addCart(selectShop) {
				let that = this
				console.log("监听 - 加入购物车");
				this.addCartFn({
					selectShop: selectShop,
					success: function(res) {
						// 实际业务时,请替换自己的加入购物车逻辑

						let obj = {
							goods_id: that.goodsId,
							goods_number: selectShop.buy_num,
							goods_sku_id: selectShop._id ? `${that.selectId}` : "0"
						}
						shopGoodsCartAdd(obj).then((res) => {
							if (res.code == 200) {
								toast("加入成功")
							} else {
								toast(res.message)
							}
							console.log("加入购物车", res);
						})
						setTimeout(function() {
							that.skuKey = false;
						}, 300);
					}
				});
			},
			buyNow(selectShop) {
				console.log("监听 - 立即购买", selectShop);
				let that = this
				this.addCartFn({
					selectShop: selectShop,
					success: function(res) {
						// 实际业务时,请替换自己的立即购买逻辑

						let data = [{
							dpName: that.goodsInfo.store ? that.goodsInfo.store.name : '',
							store_id: that.goodsInfo.store_id,
							id: that.goodsInfo.id,
							name: that.goodsInfo.name,
							image: that.image || that.goodsInfo.images_format[0],
							selectType: that.goodsInfo.type,
							price: selectShop.price,
							count: selectShop.buy_num,
							freight_price: that.goodsInfo.freight_price,
							typeId: selectShop._id ? `${that.selectId}` : "0",
							type: selectShop.sku_name_arr[0],
						}]
						uni.navigateTo({
							url: '/pages/order-confirm/order-confirm?goods=' + JSON.stringify(data)
						});
					}
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
	}

	.swiper {
		position: relative;
		width: 750rpx;
		height: 750rpx;

		.swiper_box {
			width: 750rpx;
			height: 750rpx;

			image {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.num {
			position: absolute;
			text-align: center;
			bottom: 40rpx;
			right: 40rpx;
			width: 80rpx;
			height: 32rpx;
			line-height: 32rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 16rpx;
			font-size: 20rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		}
	}

	//商品详情
	.goods_info {
		width: 750rpx;
		height: 260rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 30rpx 20rpx;
		font-family: Source Han Sans CN;

		.goods_price {
			font-size: 28rpx;
			font-weight: 500;
			color: #FA453C;
			margin-bottom: 10rpx;
		}

		.goods_name {
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			font-size: 30rpx;
			margin: 10rpx 0;
		}

		.goods_sale_num {
			font-weight: 400;
			color: #999999;
			font-size: 28rpx;
			margin: 10rpx 0;

			span {
				display: inline-block;
				margin-right: 18rpx;
			}

			text {
				margin-right: 24rpx;
			}
		}

		.cupons_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;

			.cupons .num {
				display: inline-block;
				min-width: 128rpx;
				padding: 5rpx 8rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				margin-right: 18rpx;
				border: 1px solid #ff553d;
				border-radius: 19rpx;
				font-weight: 400;
				color: #333;
				line-height: 38rpx;
				font-size: 22rpx;
			}

			.more_cupons {
				width: 149rpx;
				height: 22rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				font-weight: 400;
				line-height: 22rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					background-image: url('/static/img/箭头.png');
					background-size: cover;
					background-repeat: no-repeat;
				}

			}
		}

	}

	.typeBtn {
		width: 120rpx;
		display: block;
		background-color: rgba(0, 0, 0, 0);
		font-size: 26rpx;
		padding: 0;
		color: #333;
		height: 76rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: center;

		&::after {
			border: none;
		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 76rpx;
			font-size: 26rpx;
			color: #333;
		}

		.item .icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	//店铺
	.dp_box {
		width: 750rpx;
		height: 100rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-family: Source Han Sans CN;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		background-color: #ffffff;

		.dp_logo {
			display: flex;
			align-items: center;
			font-weight: 400;
			color: #333333;
			font-size: 30rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				background-image: url('/static/img/dp.png');
				background-size: cover;
				background-repeat: no-repeat;
				margin-right: 8rpx;
			}
		}

		.allGoods {
			display: flex;
			align-items: center;

			.all {
				font-weight: 400;
				color: #999999;
				font-size: 26rpx;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
				background-image: url('/static/img/箭头.png');
				background-size: cover;
				background-repeat: no-repeat;
				margin-left: 8rpx;
			}
		}
	}

	//用户评论
	.user_comments {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		font-family: SourceHanSansCN-Regular;

		.user_comments_num {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.comments_title {
				font-weight: 400;
				color: #333333;
				font-size: 30rpx;
			}

			.comments_nums {
				font-weight: 400;
				color: #999999;
				font-size: 24rpx;
				display: flex;
			}

			.comments_nums .icon {
				width: 24rpx;
				height: 24rpx;
				background-image: url('/static/img/箭头.png');
				background-size: cover;
				background-repeat: no-repeat;
				margin-left: 8rpx;
			}
		}

		//头像
		.user_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.left {
				display: flex;
			}

			.avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.avatar image {
				width: 70rpx;
				height: 70rpx;
			}

			.info {
				margin: 0 10rpx;

				.name {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}

				.time {
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
				}
			}

			.right {
				.icon {
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					background-image: url('/static/collect.png');
					background-size: cover;
					background-repeat: no-repeat;
					margin: 0 8rpx;
				}
			}
		}

		.comments {
			margin-top: 10rpx;

			.comments_ct {
				font-size: 34rpx;
				line-height: 68rpx;
				font-weight: 400;
				color: #333333;
			}

			.comments_pic {
				margin-top: 10rpx;
			}

			.comments_pic image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
	}

	//商品详情
	.goods_detail_info {
		text-align: center;
		width: 750rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 100rpx;

		.title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.pic image {
			width: 750rpx;
			height: 750rpx;
		}
	}

	// 购物车
	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		padding: 10rpx 20rpx;
		height: 96rpx;
		background-color: #fff;
		box-sizing: border-box;



		.left {
			width: 30%;
			display: flex;
			align-items: center;

			.items {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 120rpx;
				height: 76rpx;
				font-size: 26rpx;
				color: #333;
				margin-top: 10rpx;
				// z-index: 999;
			}

			.items .icon {
				width: 28rpx;
				height: 28rpx;
				margin-bottom: 6rpx;
			}
		}

		.right {
			width: 420rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;

			.addCartView {
				width: 200rpx;
				height: 70rpx;
				background: #363636;
				text-align: center;
				line-height: 70rpx;
				border-radius: 35rpx;
			}

			.buyView {
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				background: #ff553d;
				border-radius: 35rpx;
			}
		}
	}

	//选择规格
	.popBox {
		font-family: Source Han Sans CN;
		margin-top: 30rpx;
		width: 750rpx;
		height: 720rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.buy_goods {
			display: flex;

		}

		.buy_goods .left {
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.buy_goods .right {
			margin-left: 20rpx;

			.name {
				height: 48rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}

			.price {
				height: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FA453C;
				line-height: 48rpx;
			}

			.size {
				height: 48rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
			}

		}

		.size_select {
			margin-top: 60rpx;

			.size_title {
				height: 64rpx;
				margin-bottom: 40rpx;
				height: 28rpx;
				font-size: 30rpx;
				line-height: 64rpx;
				font-weight: 400;
				color: #333333;
			}

			.selectCt {
				display: inline-block;
				width: 120rpx;
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				margin-right: 18rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}

			.selectCt.active {
				background: #E7F5E6;
				color: #ff553d;
			}
		}

		.count {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 80rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}

		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #fff;

			.add {
				width: 320rpx;
				height: 80rpx;
				background: #FA453C;
				border-radius: 40rpx;
			}

			.buy {
				width: 320rpx;
				height: 80rpx;
				background: #ff553d;
				border-radius: 40rpx;
			}
		}
	}

	//更多优惠券
	.popCupons {
		font-family: Source Han Sans CN;
		width: 750rpx;
		height: 750rpx;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #f5f5f5;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 400;
			color: #333333;
			font-size: 28rpx;
		}

		.cupons_items {
			width: 750rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;

			.item {
				display: flex;
				box-sizing: border-box;
				overflow: hidden;
				margin-top: 20rpx;
				position: relative;
			}

			.bottom_dot {
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				bottom: -16rpx;
				left: 116rpx;
				background-color: #fff;
				border-radius: 50%;
			}

			.top_dot {
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				top: -16rpx;
				left: 116rpx;
				border-radius: 50%;
				background-color: #fff;
			}

			.item .left {
				width: 130rpx;
				height: 160rpx;
				background: #E7F5E6;
				border-radius: 8rpx;
				font-weight: 400;
				color: #ff553d;
				text-align: center;

				.price {
					font-size: 56rpx;
					font-weight: 400;
					line-height: 100rpx;
					color: #ff553d;
					font-weight: 700;
					position: relative;
				}

				.price .icon {
					position: absolute;
					left: 10rpx;
					top: 10rpx;
					font-weight: 200;
					font-size: 36rpx;
				}

				.price .num {
					margin-left: 20rpx;
				}

				.type_name {
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}

			.item .right {
				width: 580rpx;
				height: 160rpx;
				background: #F5F5F5;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.type_title {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.type_cupons {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: center;
				}

				.type_cupons .dp {
					width: 96rpx;
					line-height: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					border: 1px solid #ff553d;
					color: #ff553d;
					font-size: 20rpx;
				}

				.type_cupons .lq {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 26rpx;
					background: #ff553d;
					border-radius: 23rpx;
					color: #fff;
				}

				.toTime {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
				}


			}
		}

	}

	.boxs {
		width: 750rpx;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		background-color: #fff;

		.info {
			display: flex;
			margin-top: 20rpx;

			.left {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.right .name {
				width: 500rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				color: #333;
			}

			.right .stock {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				color: #333;
			}

			.right .price {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				color: #333;
				color: #fb391d;
			}
		}

		.type {
			margin-top: 80rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 40rpx;
				background-color: #ccc;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 40rpx;
			}

			.active {
				background-color: #ff553d;
			}
		}

		.btns {
			display: flex;
			justify-content: space-between;
			margin-top: 80rpx;

			.onBuy {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #ff553d;
				border-radius: 45rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 30rpx;
			}

			.addCarts {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #363636;
				border-radius: 45rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 30rpx;
			}
		}
	}
</style>